<template>
  <div>
    <!--头部-->
    <el-header id="head">
      <div id="headCheck">
        <span style="margin-left: 10px">学生学号：</span>
        <el-input
            placeholder="请输入内容"
            v-model="inputUid"
            clearable
            style="width: 150px">
        </el-input>
        <span style="margin-left: 10px">学生姓名：</span>
        <el-input
            placeholder="请输入内容"
            v-model="inputStudentName"
            clearable
            style="width: 150px">
        </el-input>
        <el-button type="warning" round @click="searchStudent" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="addStudentTask" style="margin-left: 50px">手动添加学生</el-button>
      </div>
    </el-header>

    <!--主体-->
    <el-main id="main">
      <template>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
        >
          <el-table-column
              fixed
              prop="uid"
              label="学号"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
          >
          </el-table-column>
          <el-table-column
              prop="enrollmentYear"
              label="入学年份"
          >
          </el-table-column>
          <el-table-column
              prop="college"
              label="学院"
          >
          </el-table-column>
          <el-table-column
              prop="major"
              label="专业"
          >
          </el-table-column>
          <el-table-column
              prop="clazz"
              label="班级"
          >
          </el-table-column>
          <el-table-column
              prop="status"
              label="学业情况"
              :formatter="statusFormat"
          >
          </el-table-column>
          <el-table-column
              prop="type"
              label="身份"
              :formatter="typeFormat"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button
                  @click="editRow(scope.$index, scope.row)"
                  type="warning"
                  size="small">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="添加学生" :visible.sync="visible">
          <el-form :model="addStudentForm" label-position="left" label-width="80px" :rules="addStudentRules">

            <el-form-item label="学生姓名" prop="name">
              <el-input v-model="addStudentForm.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="初始密码" prop="pwd">
              <el-input v-model="addStudentForm.pwd" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="入学年份" prop="enrollmentYear">
              <el-select
                  class="term-select"
                  @change="handleEnrollmentYearsChange"
                  v-model="addStudentForm.enrollmentYear"
                  placeholder="请选择入学年份"
              >
<!--                <el-option v-for="(item,index) in enrollmentYearData" :key="index" :value="item"></el-option>-->
                <el-option v-for="item in enrollmentYearData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="专业" prop="major">
              <el-select
                  class="term-select"
                  @change="handleMajorsChange"
                  v-model="addStudentForm.major"
                  placeholder="请选择专业"
              >
                <el-option v-for="(item,index) in majorData" :key="index" :value="item"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="班级" prop="clazz">
              <el-select
                  class="term-select"
                  @change="handleClazzsChange"
                  v-model="addStudentForm.clazz"
                  placeholder="请选择班级"
              >
                <el-option v-for="(item,index) in clazzData" :key="index" :value="item"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="学业情况" prop="status">
              <el-select
                  class="term-select"
                  @change=""
                  v-model="addStudentForm.status"
                  placeholder="请选择学业情况"
              >
                <el-option v-for="item in statusData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="身份" prop="type">
              <el-select
                  class="term-select"
                  @change=""
                  v-model="addStudentForm.type"
                  placeholder="请选择身份"
              >
                <el-option v-for="item in typeData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent()">提 交</el-button>
          </div>
        </el-dialog>

        <!--编辑对话框-->
        <el-dialog title="编辑学生信息" :visible.sync="editVisible">
          <el-form :model="editStudentForm" label-position="left" label-width="80px">
            <el-form-item label="学业情况" prop="status">
              <el-select
                  class="term-select"
                  @change=""
                  v-model="editStudentForm.status"
                  placeholder="请选择学业情况"
              >
                <el-option v-for="item in statusData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="身份" prop="type">
              <el-select
                  class="term-select"
                  @change=""
                  v-model="editStudentForm.type"
                  placeholder="请选择身份"
              >
                <el-option v-for="item in typeData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateStudent()">提 交</el-button>
          </div>
        </el-dialog>

        <!-- 上一页，当前页，下一页 -->
        <div class="footer-button">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
              background
          ></el-pagination>
        </div>
      </template>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "StudentList",
  data() {
    return {
      majorData: [],
      clazzData: [],
      enrollmentYearData: [
        {
          label: '2020',
          value: 2020
        },
        {
          label: '2021',
          value: 2021
        },
        {
          label: '2022',
          value: 2022
        }
      ],
      statusData: [
        {
          label: '正常',
          value: 0
        },
        {
          label: '休学',
          value: 1
        },
        {
          label: '退学',
          value: 2
        },
        {
          label: '肄业',
          value: 3
        },
        {
          label: '毕业',
          value: 4
        }
      ],
      typeData: [
        {
          label: '学生',
          value: 3
        }
      ],
      // 是否支持dialog
      visible: false,
      editVisible: false,

      // dialog表单内数据
      addStudentForm: {
        name: '',
        pwd: '000000',
        enrollmentYear: '',
        major: '',
        clazz: '',
        status: '',
        type: ''
      },

      editStudentForm: {
        status: '',
        type: ''
      },

      // dialog表单验证规则
      addStudentRules: {
        name: [{required: true, message: '请输入学生姓名', trigger: 'blur'}],
        pwd: [{required: true, message: '请设定学生初始密码', trigger: 'blur'}],
        enrollmentYear: [{required: true, message: '请输入入学年份', trigger: 'blur'}],
        college: [{required: true, message: '请输入学院', trigger: 'blur'}],
        major: [{required: true, message: '请输入专业', trigger: 'blur'}],
        clazz: [{required: true, message: '请输入班级', trigger: 'blur'}],
        status: [{required: true, message: '请输入学业情况', trigger: 'blur'}],
        type: [{required: true, message: '请输入身份', trigger: 'blur'}]
      },

      pwdValue: "000000",

      page: 1,
      pageSize: 10,
      total: 0,

      tableData: [],
      // 输入的学号
      inputUid: '',
      // 输入的学生姓名
      inputStudentName: ''
    }
  },
  mounted() {
    this.getAllMajors();
    this.getAllMajorClazzs();
  },
  methods: {
    // 编辑行(更新学生信息)
    editRow(index, row) {
      this.editVisible = true;
      this.editStudentForm = Object.assign({}, row);
    },

    // 获取当前教务所属学院的全部专业
    getAllMajors() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/studentstatus/studentInfoManagement/getAllMajors',
          }
      ).then(res => {
        if (res.data.code === 200) {
          let ret = res.data.data
          this.majorData = ret.majors

        }
      })

    },

    // 获取当前所选专业的全部班级
    getAllMajorClazzs(major) {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "post",
            url: 'http://localhost:8085/studentstatus/studentInfoManagement/getAllMajorClazzs',
            data: {
              major: major,
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          let ret = res.data.data
          this.clazzData = ret.clazzs

        }
      })

    },

    // 手动添加学生学籍信息
    addStudent() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/studentstatus/studentInfoManagement/addStudent",
            data: this.addStudentForm
          }
      )
          .then(res => {
            if (res.data.code === 200) {
              // 添加完成
              this.searchStudent(this.inputUid, this.inputStudentName)
              this.visible = false
              this.$message({message: "添加学生学籍成功！", type: "success"})
            } else {
              alert(res.data.message)
            }
          })
          .catch(error => {

          })
    },

    // 获取全部学生的信息
    getCollegeStudent() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/studentstatus/studentInfoManagement/getCollegeStudent",
            data: {
              page: this.page,
              pageSize: this.pageSize
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.getTotal();
        }
      })
    },
    // 获取全部学生的信息的总条数
    getTotal() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'get',
        url: "http://localhost:8085/studentstatus/studentInfoManagement/getTotalLineCollegeStudent",
      }).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data;
        }
      })
    },
    // 学业情况信息转换
    statusFormat(row, column, cellValue, index) {
      switch (cellValue) {
        case 0:
          return '正常';
        case 1:
          return '休学';
        case 2:
          return '退学';
        case 3:
          return '肄业';
        case 4:
          return '毕业';
      }
    },
    // 身份信息转换
    typeFormat(row, column, cellValue, index) {
      switch (cellValue) {
        case 3:
          return '学生';
      }
    },
    // 搜索指定学生
    searchStudent() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios(
          {
            method: "post",
            url: "http://localhost:8085/studentstatus/studentInfoManagement/getCollegeStudentByUidAndName",
            data: {
              uid: this.inputUid,
              name: this.inputStudentName,
              page: this.page,
              pageSize: this.pageSize
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.getTotalBySearchingName(this.inputUid, this.inputStudentName);
        }
      })
    },
    // 查询指定学生的条数
    getTotalBySearchingName(uid, name) {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'post',
        url: "http://localhost:8085/studentstatus/studentInfoManagement/getTotalLineCollegeStudentByUidAndName/",
        data: {
          uid: uid,
          name: name,
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data;
        }
      })
    },
    handleEnrollmentYearsChange() {
    },
    // 学院绑定值
    handleCollegesChange() {
    },
    handleMajorsChange(val) {
      this.major = val;
      this.getAllMajorClazzs(this.major);
    },
    handleClazzsChange() {
    },

    handleSizeChange() {
    },
    handleCurrentChange() {
    },

    // 手动添加排课按钮响应
    addStudentTask() {
      this.visible = true;
    },

    // 更新学生信息
    updateStudent() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'post',
        url: "http://localhost:8085/studentstatus/studentInfoManagement/updateStudent",
        data: this.editStudentForm
      }).then(res => {
        if (res.data.code === 200) {
          // 添加完成
          this.searchStudent(this.inputUid, this.inputStudentName)
          this.editVisible = false
          this.$message({message: "学生信息编辑成功！", type: "success"})
        } else {
          alert(res.data.message)
        }
      }).catch(error => {
      })
    },
  },
}
</script>

<style>

#head {
}

#headCheck {
}

#main {
}
</style>
